<template>
	<template v-for="(item, index) in list" :key="index">
		<!-- 所有选框使用v-model绑定一个共同的响应式数组 -->
		<!-- 选框的勾选操作，会将这个选框的value值添加到绑定的响应式数组中 -->
		<input type="checkbox" v-model="arr" :value="item"/>{{ item }}
	</template>
	<ul>
		<li v-for="(item, index) in arr" :key="index">
			{{ item }}
		</li>
	</ul>
</template>

<script setup>
import { reactive, ref } from 'vue'
const list = reactive(["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"])
// 如果数组需要绑定到复选框中，这个数组是需要使用ref函数定义
const arr = ref([])
</script>

<style scoped>
	
</style>